<template>
    <div class="add-edit-agent">
        <el-dialog width="30%" :title="pageType == 'add' ? '新增代理人员':'编辑代理人员信息'" :visible.sync="dialogVisible">
            <div class="colue-item" v-if="pageType == 'add'">
                <span>AD账号：</span>
                <el-select
                    size="mini"
                    v-model="adduser"
                    clearable
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键字"
                    :remote-method="querySearchAsync1"
                    :loading="loading">
                    <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="colue-item">
                <span>代理人账号：</span>
                <el-select
                    size="mini"
                    v-model="edituser"
                    clearable
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键字"
                    :remote-method="querySearchAsync2"
                    :loading="loading">
                    <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="colue-item">
                <span>开始时间：</span>
                <el-date-picker 
                    size="mini"
                    v-model="fromData.startTime"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </div>
            <div class="colue-item">
                <span>结束时间：</span>
                <el-date-picker                
                    size="mini"
                    v-model="fromData.endTime"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="submitForm()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import Vue from "vue";
import { DatePicker} from "element-ui";
import { alertMessage } from "@/config/myUtil";
import { getByAdOrNmData , addAuthuserApi , updateAuthuserApi } from "@/api/getData";
Vue.use(DatePicker);
export default {
    name:"AddEditAgent",
    data(){
        return {
            options1:[],
            options2:[],
            adduser:"",
            edituser:"",
            loading:false,
            pageType:"add",
            dialogVisible:false,
            fromData:{}
        }
    },
    methods:{
        async getuserList(queryString,type){
            try {
                if(queryString !== ''){
                    this.loading = true
                    let data = await getByAdOrNmData({ key: queryString });
                    data.map((item)=>{
                        item.label = `${item.userNm}—${item.deptNm}`;
                        item.value = `${item.ad}&${item.userNm}`;
                    });
                    this.loading = false;
                    if(type == 1){
                        this.options1 = data;
                    }else{
                        this.options2 = data;
                    };
                }else{
                    if(type == 1){
                        this.options1 = [];
                    }else{
                        this.options2 = [];
                    }
                }
            } catch (error) {
                console.log(error)
            }
        },
        async submitForm(){
            try {
                var pass = false
                if(this.pageType == "add"){
                    if(this.adduser && this.edituser){
                        this.fromData.ad = this.adduser.split('&')[0];
                        this.fromData.userNm = this.adduser.split('&')[1];
                        pass = true;
                    }
                }else{
                   if(this.edituser){
                        pass = true;
                    } 
                }
                if(pass){
                    this.fromData.agentAd = this.edituser.split('&')[0];
                    this.fromData.agentNm = this.edituser.split('&')[1];
                    let data = null;
                    if(this.pageType == "add"){
                        data = await addAuthuserApi(this.fromData);
                    }else{
                        data = await updateAuthuserApi(this.fromData);
                    };
                    if(data == 1){
                        alertMessage("操作成功");
                        this.dialogVisible = false;
                        this.$emit("updataThisData");
                    }else{
                        alertMessage("操作失败","warning");
                    }
                }else{
                    alertMessage("请选择人员Ad和代理人","warning");
                } 
            } catch (error) {
                console.log(error)
            }
        },
        querySearchAsync1(queryString) {
            this.getuserList(queryString,1);
        },
        querySearchAsync2(queryString) {
            this.getuserList(queryString,2);
        },
        changeStatus(type,item){
            this.pageType = type;
            if(type == "edit"){
                this.fromData = item;
                this.fromData.updateTime = null;
                this.edituser = `${item.agentAd}&${item.agentNm}`;
                this.options2 = [
                    {value:`${item.agentAd}&${item.agentNm}`,label:item.agentNm}
                ];
            }else{
                this.edituser = "";
                this.fromData = {
                    ad: "",
                    agentAd: "",
                    agentNm: "",
                    endTime: "",
                    startTime: "",
                    updateTime: null,
                    userNm: "",
                }
            }
            this.dialogVisible = true;
        },
    }
}
</script>
<style lang="less" scoped>
@import url("../less/addeditagent.less");
</style>